<template>
  <div class="table-list">
    <avue-crud class="tablelist"
               :data="data"
               :option="option"
               :page="page"
               @refresh-change="refreshChangeList"
               @current-change="currentChangeList"
               @size-change="sizeChangeList"
               @row-del="rowDel">
      <template slot-scope
                slot="menuLeft">
        <el-button type="primary"
                   icon="el-icon-plus"
                   size="small"
                   plain
                   class="addBtn"
                   @click="addrecurse">新增</el-button>
      </template>
    </avue-crud>
    <!-- 弹框 -->
    <el-dialog :visible.sync="dialogVisible"
               class="dialogResech"
               title="添加资源"
               width="70%">
      <avue-crud :option="option1"
                 :data="resucedata"
                 ref="crud1"
                 v-model="form"
                 :table-loading="loading"
                 @selection-change="handleSelectionChange"
                 :before-open="beforeOpen"
                 :page="page"
                 @refresh-change="refreshChange"
                 @search-change="searchChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @on-load="onLoad">
      </avue-crud>
      <span slot="footer"
            class="dialog-footer">

        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary"
                   @click="addrecurseData">新增</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getList, setAuthority, resourceDelete } from "@/api/admin/menu";
export default {
  props: ["Event"],
  data () {
    return {
      form: {},
      query: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      box: false,
      menuId: 0,
        pcode:null,
      search: "",
      searchForm: {},
      dialogVisible: false,
      rowKey: 'menuId',
      data: [],
      resucedata: [],
      checkdata: [],
      option1: {
        page: true,
        align: 'center',
        menuAlign: 'center',
        size: 'mini',
        excelBtn: false,
        addBtn: false,
        tip: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        editBtn: false,
        "searchBtn": false,
        "printBtn": false,
        "columnBtn": false,
        "refreshBtn": false,
        "menu": false,
        "filterBtn": false,
        delBtn: false,
        height: 'auto',
        // calcHeight: 380,
        rowKey: 'resourceId',
        column: [
          {
            label: "资源名称",
            prop: "name",

          },

          {
            label: "模块名称",
            prop: "modularName",
            search: true,
          },
          {
            label: "app编码",
            prop: "appCode",
          },
          {
            label: "路由地址",
            prop: "url",
            search: true,
          },
          {
            label: "资源编号",
            prop: "code",
          },
        ]
      },
      option: {
        filterBtn: false,
        align: "center",
        menuAlign: "center",
        addBtn: false,
        editBtn: false,
        border: true,
        cellBtn: false,
        height:380,
        calcHeight:'auto',
        checkbox: false,
        index: true,
        "refreshBtn": false,
        "columnBtn": false,
        column: [
          {
            label: "资源名称",
            prop: "name",
          },
          {
            label: "模块名称",
            prop: "modularName",
          },
          {
            label: "路由地址",
            prop: "url"
          },
          {
            label: "资源编号",
            prop: "code"
          }
        ]
      }
    };
  },
  created () {
    this.Event.$on("tablelist", data => {
      this.menuId = data.treeItem.menuId;
      this.pcode = data.treeItem.pcode;
        this.onLoad(this.page)
    });

  },
  methods: {
    addrecurseData () {
        console.log(this.checkdata.length)
        if(this.checkdata.length>0){
            //点击确认新增资源
            let obj = {
                menuId: this.menuId,
                resourceArray: this.checkdata.map(item => {
                    return item.resourceId;
                })
            };

            setAuthority(obj).then(res => {

                if (res.status == 200) {
                    this.data = this.data.concat(this.checkdata);
                }
            });
            console.log(this.checkdata);
            this.dialogVisible = false;
            this.checkdata = [];
            this.$refs.crud1.toggleSelection();
            console.log(this.checkdata);
        }
        else{
            this.$message.error('请先选择你要添加的资源');
        }
    },
    closeDialog () {
      this.checkdata = [];
      this.dialogVisible = false;
    },
    handleSelectionChange (data) {
      this.checkdata = data;
    },
    addrecurse () {
      this.dialogVisible = true;
      this.onLoad(this.page);
      // this.getListData();
    },

    // 删除行数据
    rowDel (row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return resourceDelete(row.resourceId);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    // getListData (page, size, params) {
    //   getList(page, size, params).then(res => {
    //     //初始化请求表格结构数据
    //
    //     if (res.status == 200) {
    //       this.resucedata = [];
    //       this.resucedata = res.data.data;
    //     }
    //   });
    // },
    // searchChange(params) {
    //   this.$message.success(
    //     "search callback" +
    //       JSON.stringify(Object.assign(params, this.searchForm))
    //   );
    //    this.query = params;
    //    this.onLoad(this.page, params);
    // },

    searchChange (params,done) {
      this.query = params;
      this.onLoad(this.page, params,done);
    },
    beforeOpen (done, type) {
      if (["edit", "view"].includes(type)) {
        getList(this.form.modularName).then(res => {
          this.resucedata = [];
          this.form = res.data.data;
        });
      }
      done();
    },
    // 分页
    currentChangeList(currentPage) {
        this.page.currentPage = currentPage;
        this.onLoadList(this.page);
    },
    sizeChangeList(pageSize) {
        this.page.pageSize = pageSize;
        this.onLoadList(this.page);
    },
    refreshChangeList() {
        this.onLoadList(this.page);
    },

    // 监听pagenum改变
    currentChange (currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    //  监听pageSize改变
    sizeChange (pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);

    },
    refreshChange () {
      this.onLoad(this.page);
    },
    onLoad (page, params = {menuId:this.menuId,pcode:this.pcode},done) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          if(done){
            done();
          }
          if(res.data.code == 200){
              this.loading = false;
              this.page.total = res.data.count;
              this.data = res.data.data
          }
        if (res.status == 200) {
          this.resucedata = [];
          this.resucedata = res.data.data;
        }
      });
    }
  }
};
</script>
<style scoped>
.el-table {
  height: 393px !important;
}
.tablelist {
  height: 100%;
  overflow-y: scroll;
}
.el-table {
  text-align: center;
}
.addbtn {
  margin-top: 10px;
  background-color: #F39800;
  color: #fff;
}
.serch {
  width: 30%;
  margin-bottom: 20px;
}
.block {
  margin-top: 20px;
}
.el-dialog__body .avue-crud .avue-crud__menu {
  display: none !important;
  min-height: 1px !important;
  margin-bottom: 0;
}
.el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.el-dialog__header {
  padding: 20px 24px 10px;
}
.dialogresech {
  position: fixed;
  top: -90px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}
</style>